import { Cascader, Checkbox, Form, Input, Select } from 'antd';
import React, { Component } from 'react';

export default class FormFilter extends Component {
  render() {
    const { columns } = this.props;
    return (
      <>
        {columns
          .filter((_) => {
            return _.showFilter;
          })
          .map((item, index) => {
            if (item.select) {
              return (
                <Form.Item
                  style={{
                    marginTop: 8,
                    marginBottom: 8,
                  }}
                  key={index}
                  name={item.dataIndex}
                  label={item.title}
                >
                  <Select allowClear>
                    {item.Option.map((role, num) => {
                      return (
                        <Select.Option key={num} value={role.value}>
                          {role.name}
                        </Select.Option>
                      );
                    })}
                  </Select>
                </Form.Item>
              );
            } else if (item.checkbox) {
              return (
                <Form.Item
                  style={{
                    marginTop: 8,
                    marginBottom: 8,
                    alignItems: 'center',
                  }}
                  key={index}
                  initialValue={item.defaultValue}
                  name={item.dataIndex}
                  label={item.title}
                >
                  <Checkbox.Group options={item.Option}></Checkbox.Group>
                </Form.Item>
              );
            } else if (item.cascader) {
              return (
                <Form.Item
                  style={{
                    marginTop: 8,
                    marginBottom: 8,
                  }}
                  key={index}
                  name={item.dataIndex}
                  label={item.title}
                >
                  <Cascader options={item.Option}></Cascader>
                </Form.Item>
              );
            } else if (item.treeSelect) {
              return (
                <Form.Item
                  style={{
                    marginTop: 8,
                    marginBottom: 8,
                  }}
                  key={index}
                  name={item.dataIndex}
                  label={item.title}
                >
                  <Select allowClear>
                    {item.treeSelect.map((leaf, index) => {
                      return (
                        <Select.OptGroup label={leaf.title} key={index}>
                          {leaf.children.map((item, num) => {
                            return (
                              <Select.Option
                                value={item.title}
                                title={item.title}
                                key={`${index}.${num}`}
                              >
                                {item.title}
                              </Select.Option>
                            );
                          })}
                        </Select.OptGroup>
                      );
                    })}
                  </Select>
                </Form.Item>
              );
            } else {
              return (
                <Form.Item
                  style={{
                    marginTop: 8,
                    marginBottom: 8,
                  }}
                  key={index}
                  name={item.dataIndex}
                  label={item.title}
                >
                  <Input placeholder={`请输入${item.title}`} allowClear />
                </Form.Item>
              );
            }
          })}
      </>
    );
  }
}
